<template>
  <div class="bigbox">
    <div class="topbox">
      <div> <span class="bor"></span> 新增文章</div>
    <div>
    <router-link to="/add"><el-button type="primary" @click="$router.go(-1)">返回上一级</el-button></router-link></div>
    </div>
    <!-- from -->
    <el-row style="height: 90vh;background-color: rgb(255, 255, 255);border-radius: 20px;box-shadow: 0px 0px 10px #aaa;padding: 0 26px;">
    <el-col :span="24">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="width: 500px;margin-top: 30px;">
  <el-form-item label="文章标题" prop="name">
    <el-input v-model="ruleForm.name" placeholder="请输入标题"></el-input>
  </el-form-item>
  <el-form-item label="上传缩略图" required>
    <el-col :span="11">
      <el-upload
        class="avatar-uploader"
        action="https://jsonplaceholder.typicode.com/posts/"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    </el-col>
  </el-form-item>
  <el-form-item label="作者" prop="username">
    <el-input v-model="ruleForm.username" placeholder="请输入作者"></el-input>
  </el-form-item>
  <el-form-item label="文章内容" prop="html">
    <div style="border: 1px solid #ccc;width: 912px;">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :mode="mode"
        />
        <Editor
            style="height: 150px; overflow-y: hidden;"
            v-model="ruleForm.html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
    </div>
  </el-form-item>
  <el-form-item label="文章状态" prop="delivery">
    <el-switch v-model="ruleForm.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="上传时间" prop="delivery">
    <div class="block">
    <!-- <span class="demonstration">默认</span> -->
    <el-date-picker
      v-model="ruleForm.value1"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
  </div>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
    <el-button @click="resetForm('ruleForm')">取消</el-button>
  </el-form-item>
</el-form>         
    </el-col>
    </el-row>
    <!-- from -->
  </div>

</template>

<script>
import {tjdataApi} from '../../../api/cmh'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
    components: { Editor, Toolbar },
 data() {
      return {
        imageUrl: '',
        editor: null,
        
        editorConfig: { placeholder: '请输入内容...' },
        mode: 'default', // or 'simple'
        ruleForm: {
          name: '',   //文章标题
          username:'',  //作者姓名
          avatar:'',
          html: "<p>hello</p>", //富文本
          delivery: false,    //开关
          value1: '',     //日期
        },
        rules: {
          name: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          username: [
            { required: true, message: '请输入作者', trigger: 'change' }
          ],
          html: [
            { required: true, message: '请输入内容', trigger: 'change' }
          ],
          
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            tjdataApi(this.ruleForm).then(res=>{
              console.log(res);
              if(res.code==202){
                this.$router.replace('/he')
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm() {
        console.log(123);
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="less" scoped>
*{
  text-align: initial; 
  line-height: 1px;
}
.topbox{
  width: 100%;
  height: 60px;
  // background-color: red; 
  display: flex;
  line-height: 60px;
  justify-content: space-between;
  >div{
    margin-right: 40px;
    font-size: 22px;
    margin-left: 40px;
    line-height: 36px;
  }
  .bor{
    width: 30px;
    height: 10px;
    background-color: blue;
    display: inline-block;
    margin-bottom: 3px;
    margin-right: 5px;
    border-radius: 25px;
  }
}
.ipt{
  margin: 20px 10px 0;
}
/deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>